Test your skills: The Cascade

The aim of this skill test is to help you assess whether you understand universal property values for controlling inheritance in CSS.

Note: To get help, read our Test your skills usage guide. You can also reach out to us using one of our communication channels.

Cascade 1

In this task, we want you to use one of the special values we looked at in the controlling inheritance section.

To complete the task, write a declaration in a new rule that will reset the background color back to white, without using an actual color value.

The starting point of the task looks like this:

Play

Here's the underlying code for this starting point:

htmlCopyPlay

<div class="container" id="outer">
  <div class="container" id="inner">
    <ul>
      <li class="nav"><a href="#">One</a></li>
      <li class="nav"><a href="#">Two</a></li>
    </ul>
  </div>
</div>

cssCopyPlay

#outer div ul .nav a {
  background-color: powderblue;
  padding: 5px;
  display: inline-block;
  margin-bottom: 10px;
}

div div li a {
  color: rebeccapurple;
}

The updated styling should look like this:

Play

Click here to show the solution

One possible solution is as follows:

There are two things you need to do in this task. First, write a selector for the a element which is more specific than the selector used to turn the background powderblue. In this solution, this is achieved by using the id selector, which has very high specificity.

Then you need to remember there are special keyword values for all properties. In this case, using inherit sets the background color back to be the same as its parent element.

Cascade 2

To complete this task, manipulate the cascade layer order to color the links rebeccapurple. No editing the lightgreen declaration!

This task is a stretch goal — it requires knowledge of cascade layers, which we didn't cover in the Handling conflicts article. You can find the information you need to attempt this task at Cascade layers > Determining the precedence based on the order of layers.

The starting point of the task looks like this:

Play

Here's the underlying code for this starting point:

htmlCopyPlay

<div class="container" id="outer">
  <div class="container" id="inner">
    <ul>
      <li class="nav"><a href="#">One</a></li>
      <li class="nav"><a href="#">Two</a></li>
    </ul>
  </div>
</div>

cssCopyPlay

@layer yellow, purple, green;

@layer yellow {
  #outer div ul .nav a {
    padding: 5px;
    display: inline-block;
    margin-bottom: 10px;
  }
}
@layer purple {
  div div li a {
    color: rebeccapurple;
  }
}
@layer green {
  a {
    color: lightgreen;
  }
}

The updated styling should look like this:

Play

Click here to show the solution

One possible solution is as follows:

There is one thing you need to do in this task: change the order of precedence so the declaration for the desired color is in the last declared layer, which is what this solution shows.

You need to remember that unlayered normal styles take precedence over layered normal styles. But, if all styles are within layers — as in the case of this task — styles in later declared layers take precedence over styles declared in earlier layers. Moving the purple layer to the end means it has precedence over the green and yellow layers.

Help improve MDN

Was this page helpful to you?

YesNo

Learn how to contribute

This page was last modified on Feb 3, 2026 by MDN contributors.

View this page on GitHub • Report a problem with this content

Filter sidebar

Your blueprint for a better internet.

MDN

Contribute

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998–2026 by individual mozilla.org contributors. Content available under a Creative Commons license.